<template>
  <div class="sub-nav">
    <el-row class="sub-nav__inner" type="flex" :justify="flex" tag="ul">
      <router-link
        class="sub-nav__tab"
        tag="li"
        active-class="is-active"
        v-for='(item,index) in navList' :key="index"
        :to="item.to"
        v-if="item.isShow !== false"
      >
        {{item.title}}
      </router-link>
    </el-row>
  </div>
</template>


<script>
  export default {
    name: "sub-nav",
    props: {
      navList: {
        default() {
          return [];
        },
        type: Array
      },
      flex: {
        default: 'start',
        type: String
      }
    }
  };
</script>

<style lang="scss" scoped>
  $--height: 70px !default;


  @include b(sub-nav) {
    background: #f3f3f3;
    width: 100%;

    @include e(inner) {
      height: $--height;
      line-height: $--height;
      list-style: none;
      padding: 0;

      @include main-center(1200px);
    }

    @include e(tab) {
      width: 225px;
      text-align: center;
      font-size: $--font-size-base;
      font-weight: bold;
      color: black;
      cursor: pointer;
      @include when(active) {
        color: $--color-primary;
      }
    }
  }
</style>
